import { useEffect, useState } from "react";
import { Card, List, Swiper } from "antd-mobile";
import { BOX2_ITEM } from "../../constants/index";
import "./_box2.css";
import styles from "../global_box.css";
import style from "./box2.css";
import { Box2, Box22 } from "../../components/index_box/chart_box2";
import { BOX2_NAME } from "../../constants/index";
import { useModel } from 'umi';
import { DatePicker } from "antd-mobile";
import { Time } from "../../utils/time";

const BoxPage2 = () => {
    const { setName } = useModel('global')
    const [visibleStart, setVisibleStart] = useState(false)
    const [visibleEnd, setVisibleEnd] = useState(false)
    const [startDate, setStartDate] = useState(new Time(Date.now()).plusDay(-6).data)
    const [endDate, setEndDate] = useState(new Time(Date.now()).data)
    useEffect(() => {
        setName(BOX2_NAME)
    }, [])
    return (
        <div className={styles.bg}>
            <div style={{ height: '55px' }}></div>
            <div className={styles.main}>
                <div className={'apppadding ' + style.time_search}>
                    <div>
                        <span onClick={() => setVisibleStart(true)}>
                            {startDate.toLocaleDateString()}
                        </span>{' - '}
                        <span onClick={() => setVisibleEnd(true)}>
                            {endDate.toLocaleDateString()}
                        </span>
                    </div>
                    <div style={{ color: "var(--color--)" }}>搜索</div>
                </div>
                <Swiper className={style.swiper}>
                    <Swiper.Item>
                        <div className={styles.top_echart}>
                            <div className={styles.title}>{BOX2_ITEM.LIST1.HEADER}</div>
                            <Box2 hasTitle={false}></Box2>
                        </div>
                    </Swiper.Item>
                    <Swiper.Item>
                        <div className={styles.top_echart}>
                            <div className={styles.title}>{BOX2_ITEM.LIST2.HEADER}</div>
                            <Box22 hasTitle={false}></Box22>
                        </div>
                    </Swiper.Item>
                </Swiper>
                <div className={styles.bottom_list}>
                    <List header={BOX2_ITEM.LIST1.HEADER1}>
                        {[1, 2, 3, 4, 5, 6].map(item => <List.Item key={item}>
                            <Card title={"患者姓名"} extra={"就诊科室"}>
                                <div className={style.card_content}>
                                    <div>平均节省排队时间:10分钟</div>
                                    <div className={style.createAt}>{"2024-4-22 11:36:00"}</div>
                                </div>
                            </Card>
                        </List.Item>)}
                    </List>
                </div>
            </div>
            <DatePicker
                title='开始时间'
                visible={visibleStart}
                onClose={() => setVisibleStart(false)}
                onConfirm={(val) => {
                    if (!val) return
                    setStartDate(val || '')
                }}
                max={endDate}
                defaultValue={startDate}
            >
            </DatePicker>
            <DatePicker
                title='结束时间'
                visible={visibleEnd}
                onClose={() => setVisibleEnd(false)}
                onConfirm={(val) => {
                    if (!val) return
                    setEndDate(val || '')
                }}
                min={startDate}
                max={new Date()}
                defaultValue={endDate}
            >
            </DatePicker>
        </div>
    );
};

export default BoxPage2;
